Webpack 打包类库踩坑 |
您所在的位置：网站首页 › webpack打包报错 不存在node module › Webpack 打包类库踩坑 |
Webpack 打包类库踩坑
|
本文已参与「新人创作礼」活动，一起开启掘金创作之路 写在前面最近在公司负责开发一套公司业务相关的通用工具库，第一次接触到这种需求，还是很兴奋的，吭哧吭哧开发了一段时间，现在准备开始应用到实际项目中了，于是开始进行 1.0.0.2022.3.23_beta 测试发布工作，虽然之前对 webpack 有所了解，但是并不深入，更多停留在 vue 项目相关的打包上，这次的打包工作有所不同，打包的是纯 js 工具库，于是我开始踩坑，也就有了今天这一篇踩坑实录，接下来就跟我一起看看我的爬坑记吧 项目简介为了避免对公司相关业务代码的泄露，这里我就采用示例代码表达一下原项目结构 // ==================== tool.js 中的代码 ==================== const toolFun = function(){ console.log('I am a Tool Person!!') } export default toolFun; // ==================== init.js 中的代码 ==================== import core from './core' import Tool from './tool' const init = function(){ core.prototype.Tool = Tool } export default init; // ==================== core.js 中的代码 ==================== import init from './init' const createInstance = function(params){ init(params) } export default createInstance; // ==================== vue 中引用的代码 ==================== import CreateInstance from '@/core/core' export default { mounted(){ const Instance = new CreateInstance() console.log('Instance', Instance) window.Instance = Instance } }这个项目由一系列 js 工具函数组成，内部经过一系列相互调用后最终在入口文件 core.js 中通过调用 init 方法挂载到实例上，写法可能还有些不太严谨，欢迎大佬指正 踩坑过程 对 js 工具库进行单独打包因为平时开发的技术栈是 vue ，所以这个项目也以 vue 为测试环境，在 vue 中进行开发，开发过程中完全没有问题，而开始打包的时候，问题就出现了，下面是一开始打包的 webpack 配置: const path = require('path') module.exports = { mode: 'development', entry: path.resolve(__dirname, 'src/core/core.js'), output: { path: path.resolve(__dirname, 'core'), filename: 'core.min.js', }, module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] } }打包顺利完成 接下来就到了引入测试阶段了，果然，并没有想象中那么顺利，报错如期而至 由于先前没有这方面经验，所以先 百度一下，你就知道了！ ，可惜，百度了好多下，我还是不知道。。。 分析报错于是开始基于报错盲猜，可能是打包配置的问题，而 default 让我几乎猜到就是 export default 导出的问题，于是开始扒拉 webpack官网，找到 DOCUMENTATION-Configuration 中的 OutPut 相关配置 修改 webpack 配置，再次打包、测试 const path = require('path') module.exports = { mode: 'development', entry: path.resolve(__dirname, 'src/core/core.js'), output: { path: path.resolve(__dirname, 'core'), filename: 'core.min.js', libraryTarget: 'umd' // 添加输出库配置 }, module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] } }测试正常，至此踩坑结束！ 虽然踩了一个很小很初级的坑，但是还是在这个过程中学到了不少，解决完打包问题后，顺便了解了下相关的打包工具，其中两大框架 React、Vue 打包所使用的 Rollup 号称打包单一工具类库更简洁、体积更小，于是不多说，顺手做个 Webpack、Rollup 对比 打包文件对比
正如官网介绍所说的： Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。 Webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。 Rollup就是一个用来打包类库的最佳打包工具，而 Webpack 更加偏向于前端工程化，更加适合涉及 css、html 等复杂的代码拆分合并的场景。 总结Webpack 的配置还是相对比较固定的，常用的配置项无非就是那么几项，只要能够多花时间，熟悉各种场景所对应的特定配置，基本上就能够少踩很多的坑！ 往期好文推荐面试官：说说从输入 URL 到页面显示到底经历了什么，体现一下你的知识广度 面试官：作为前端，服务器相关了解多少？ 面试官：HTTPS 采用的是对称加密还是非对称加密？具体说说其加密过程 面试官：说说 Cookie 和 Token 的区别？ 面试官：网络安全了解多少，简单说说？（一） 面试官：网络安全了解多少，简单说说？（二） 面试官：网络安全了解多少，简单说说？（三） 面试官：网络安全了解多少，简单说说？（四） 面试官：网络安全了解多少，简单说说？（五） 面试官：网络安全了解多少，简单说说？（六） 面试官：网络安全了解多少，简单说说？（七） 面试官：网络安全了解多少，简单说说？（八） 浅尝 | 从 0 到 1 Vue 组件库封装 面试官：这么简单的正则表达式都不会？ Webpack 打包类库踩坑 面试官：你就只会 npm run build 吗？（Webpack 配置 Vue+Ts） 面试官：连VuePress都没搭过还说开发过组件库？（VuePress 搭建） 面试官: 连 Vue 视图更新都不会写？（Vue视图更新原理【一】） 面试官: 能不能手写 Vue 响应式？（Vue2 响应式原理【完整版】） 面试官：能不能手写 Vue3 响应式（Vue3 原理解析之响应系统的实现） JS 优雅之道（JS 代码优化小 Tip） 面试官：你真的会用 SVG 吗? (SVG 应用实战) 面试官：说一下这个Loading动画实现思路 (CSS3 实现 Loading 动画) JS 扫盲题 ( 面试题梳理系列 （一）) 面试官：你确定你说的防抖不是节流吗？( 面试题梳理系列 （二）) 面试官：除了 HTTP，你还用过什么通信协议？(Websocket 在数字孪生中的应用) 面试官：你真的理解 Event Loop 吗?( JS 事件循环 ) 面试官：v-for 中 key 为什么不能用 index，从原理层面聊聊？ 面试官：vue-router 的 hash 与 history 哪个模式会刷新页面? 面试官：说说你平时用过的自适应方案（数字孪生可视化自适应方案） 面试官：说一下如何优化过渡动画（数字孪生可视化过渡动画） 写在最后博主接下来将持续更新好文，欢迎关注博主哟！！ 如果文章对您有帮助麻烦亲点赞、收藏 + 关注和博主一起成长哟！！❤️❤️❤️ |
【本文地址】
今日新闻 |
推荐新闻 |